<template>
    <div class="basic-menu-layout">
        <a-layout style="height: 100vh;" id="components-layout-demo-custom-trigger">
            <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
                <div class="logo" style="margin: 10px!important;">
                    <img src="../assets/img/u137.png">
                    <span class="logo-title" v-if="!collapsed">进销存系统</span>
                </div>
                <basic-menu :collapsed="collapsed"></basic-menu>
            </a-layout-sider>
            <a-layout>
                <basicHead :collapsed="collapsed" @toggleCollapsed="() => (collapsed = !collapsed)"></basicHead>
                <a-layout-content :style="{ margin: '10px', background: '#fff', minHeight: '280px' }">
                    <transition name="page-transition">
                        <router-view></router-view>
                    </transition>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>
<script>
    import basicMenu from './basicMenu';
    import basicHead from './baiscHead';
    export default {
        components: {
            basicMenu,
            basicHead
        },
        data() {
            return {
                collapsed: false,
            };
        },
    };
</script>
<style>
    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }

    /*router change style*/
    .page-transition-enter {
        opacity: 0;
    }

    .page-transition-leave-active {
        opacity: 0;
    }

    .page-transition-enter .page-transition-container,
    .page-transition-leave-active .page-transition-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    .basic-menu-layout .logo img{
        height: 32px;
    }
    .basic-menu-layout .logo .logo-title{
        color: #fff;
    }
</style>
